<template>
	<view class="home page">
		<view class="home-top-wrapper">
			<view class="status_bar">
			</view>
			<view class="home-title">今日数据</view>
			<view class="chart-box f-c a-c j-c">
				<image class="quan" src="@/static/images/home/quan.png">
        
        <div class="process-chart">
            <echarts ref="echarts2" :option="option" canvasId="echarts2"></echarts>
        </div>
				</image>
				<view class="name">今日步数</view>
				<view class="num">{{ data1.steps }}</view>
				<view class="desc">你已超过95%的用户</view>
			</view>
			<view class="item-box f-r a-c j-b">
				<view class="item f-c a-c">
					<image class="icon" src="../../static/images/home/sj.png"></image>
					<view class="num">{{ data1.minute }}</view>
					<view class="unit">总时长/分钟</view>
				</view>
				<view class="item f-c a-c">
					<image class="icon" src="../../static/images/home/run.png"></image>
					<view class="num">{{ data1.distance }}</view>
					<view class="unit">总距离/公里</view>
				</view>
				<view class="item f-c a-c">
					<image class="icon" src="../../static/images/home/huo.png"></image>
					<view class="num">{{ data1.consume }}</view>
					<view class="unit">总消耗/千卡</view>
				</view>
			</view>
		</view>
		<view class="home-content">
			<view class="card-box f-r j-b">
				<view class="card card1 f-c j-c">
					<text class="name">目标步数</text>
					<text class="count">目标{{ count1 }}步</text>
					<image src="@/static/images/home/card1.png"></image>
				</view>
				<view class="card card2 f-c j-c">
					<text class="name">目标消耗</text>
					<text class="count">目标消耗{{ count2 }}千卡</text>
					<image src="@/static/images/home/card2.png"></image>
				</view>
			</view>

			<view class="notice-box f-r a-c">
				<view class="name">通知</view>
				<div v-for="item in tips" :key="item.position_id" style="display: flex;align-items: center">
          <image src="../../static/images/home/laba.png" class="laba"></image>
          <view class="value">{{ item.position_name }}</view>
        </div>
			</view>

			<view class="block-box">
				<view class="top f-r a-c j-b">
					<view class="icon-box f-r a-c">
						<view class="icon icon1 f-r j-c a-c">
							<image src="../../static/images/home/run2.png"></image>
						</view>
						<text class="title">跑步</text>
					</view>
					<view class="arrow f-r a-c"  @click="toRouter('/pages/run-history/run-history')">
						<text class="arrow-text">查看历史</text>
						<text class="arrow-icon"> > </text>
					</view>
				</view>

				<view class="bottom f-r a-c j-b">
					<view class="b-l">
						<view class="title">最近一次跑步</view>
						<view class="value">
							<text class="value-num">{{ data2.steps || 0}}</text>
							<text class="value-unit">千米</text>
						</view>
					</view>
					<view class="b-r f-r a-c">
						<view class="b-r-item">
							<view class="title">时长(分钟)</view>
							<view class="value">{{ data2.minute || 0 }}</view>
						</view>
						<view class="b-r-item">
							<view class="title">消耗(千卡)</view>
							<view class="value">{{ data2.consume || 0 }}</view>
						</view>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="block-box">
				<view class="top f-r a-c j-b">
					<view class="icon-box f-r a-c">
						<view class="icon icon1 f-r j-c a-c" style="background-color: #5A70FF;">
							<image src="../../static/images/home/run2.png"></image>
						</view>
						<text class="title">走路</text>
					</view>
					<view class="arrow f-r a-c" @click="toRouter('/pages/run-history/run-history')">
						<text class="arrow-text">查看历史</text>
						<text class="arrow-icon"> > </text>
					</view>
				</view>

				<view class="bottom f-r a-c j-b">
					<view class="b-l">
						<view class="title">最近一次走路</view>
						<view class="value" style="color: #5A70FF;">
                <text class="value-num">{{ data3.steps  || 0}}</text>
							<text class="value-unit">千米</text>
						</view>
					</view>
					<view class="b-r f-r a-c">
						<view class="b-r-item">
							<view class="title">时长(分钟)</view>
							<view class="value">{{ data3.minute  || 0}}</view>
						</view>
						<view class="b-r-item">
							<view class="title">消耗(千卡)</view>
							<view class="value">{{ data3.consume  || 0}}</view>
						</view>
					</view>
				</view>
			</view>
			<!--  -->
		<view class="block-box block-box2">
			<view class="top f-r a-c j-b">
				<view class="icon-box f-r a-c">
					<text class="title" style="font-size: 32rpx;color: #333;font-weight: bold;">运动荣誉排行榜</text>
				</view>
				<view class="arrow f-r a-c" @click="toRouter('/pages/rank/rank')">
					<text class="arrow-text">查看最新完整榜单</text>
					<text class="arrow-icon"> > </text>
				</view>
			</view>

			<view class="bottom f-r a-c j-b">
				<text class="tips">快来看看其他小伙伴有多能跑</text>
				<image style="width: 62rpx;height: 70rpx;" src="../../static/images/home/jiangb.png"></image>
			</view>
		</view>
		</view>
		<TabBar page-path="/pages/index/index"></TabBar>
	</view>
</template>

<script>
	import http from '@/api/api.js'
  import echarts from '@/components/echarts-uniapp/echarts-uniapp'
  var placeHolderStyle = {
      normal: {
          label: {
              show: false
          },
          labelLine: {
              show: false
          },
          color: "rgba(0,0,0,0)",
          borderWidth: 0
      },
      emphasis: {
          color: "rgba(0,0,0,0)",
          borderWidth: 0
      }
  };
  
  
  var dataStyle = {
      normal: {
          formatter: '{c}%',
          position: 'center',
          show: true,
          textStyle: {
              fontSize: '40',
              fontWeight: 'normal',
              color: '#06E4FA'
          }
      }
  };
  export default {
      components: {
          echarts
      },
		data() {
			return {
				count1: 0,
				count2: 0,
          data1: {},
          data2: {},
          data3: {},
        tips: [],
          option: {}
			}
		},
		onLoad() {
			this.getData()
        this.option = {
            series: [
                {
                type: 'pie',
                hoverAnimation: false, //鼠标经过的特效
                radius: ['90%', '79%'],
                center: ['50%', '50%'],
                startAngle: 225,
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: 100,
                    itemStyle: {
                        normal: {
                            color: '#2A3150'
                        }
                    },
                }, {
                    value: 35,
                    itemStyle: placeHolderStyle,
                },
        
                ]
            },
                //上层环形配置
                {
                    type: 'pie',
                    hoverAnimation: false, //鼠标经过的特效
                    radius: ['90%', '79%'],
                    center: ['50%', '50%'],
                    startAngle: 225,
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    label: {
                        normal: {
                            position: 'center'
                        }
                    },
                    data: [{
                        value: 75,
                        itemStyle: {
                            normal: {
                                color: '#06E4FA'
                            }
                        },
                        label: dataStyle,
                    }, {
                        value: 35,
                        itemStyle: placeHolderStyle,
                    },
            
                    ]
                },
            ]
        }
		},
		methods: {
			getData() {
				http.getHome({}).then(res => {
					if (res.code === 0) {
              this.data1 = res
					}
				})

        http.getTips().then(res => {
          if (res.code === 0) {
            this.tips = res.data
          }
        })

          http.getLastRun().then(res => {
              if (res.steps && res.steps.length) {
                  this.data2 = res.steps[0]
              }
          })
          http.getLastStep().then(res => {
              console.log(res)
              if (res.steps && res.steps.length) {
                  this.data3 = res.steps[0]
              }
          })
			},
        toRouter(url) {
            uni.navigateTo({
                url
            })
        }
		}
	}
</script>

<style lang="less">
	.home {
		height: 100vh;
		overflow: auto;
      .process-chart {
          position: absolute;
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 30rpx;
          z-index: 1;
      }
	}
	.home-top-wrapper {
		background-color: #0F153B;
		.home-title {
			margin-top: 30rpx;
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			padding: 40rpx 0;
		}
		.item-box {
			padding: 60rpx 78rpx 110rpx;
			.item {
				text-align: center;
				.icon {
					width: 44rpx;
					height: 44rpx;
				}
				.num {
					margin: 15rpx 0;
					font-size: 42rpx;
					font-family: DIN;
					font-weight: 500;
					color: #FFFFFF;
				}
				.unit {
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
				}
			}
		}
		.chart-box {
			width: 476rpx;
			height: 400rpx;
			margin: 0 auto;
			position: relative;
			.quan {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 0;
			}
			.name {
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #fff;
				margin-bottom: 10rpx;
          margin-top: 20rpx;
			}
			.num {
				font-size: 72rpx;
				font-family: DIN;
				font-weight: bold;
				color: #FFFFFF;
				margin-bottom: 20rpx;
			}
			.desc {
				font-size: 20rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}
		}
	}
	.home-content {
		margin-top: -60rpx;
		border-radius: 60rpx 60rpx 0px 0px;
		background-color: #F6F6F6;
		padding: 30rpx;
		.block-box {
			margin-bottom: 38rpx;
			padding: 16rpx 35rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 20rpx;
			.top {
				margin-bottom: 36rpx;
				.arrow {
					color: #2F86FD;
					.arrow-text {
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 500;
					}
					.arrow-icon {
						margin-left: 13rpx;
					}
				}
				.icon-box {
					.icon {
						width: 34rpx;
						height: 34rpx;
						background: #F9B511;
						border-radius: 50%;
						image {
							width: 21rpx;
							height: 23rpx;
						}
					}
					.icon1 {
						background-color: #F9B511;
					}
					.title {
						margin-left: 14rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
					}
				}
			}

			.bottom {
				margin-bottom: 24rpx;
				.b-r {
					.b-r-item {
						margin-left: 72rpx;
						text-align: right;
						.title {
							font-size: 20rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #666666;
							margin-bottom: 26rpx;
						}
						.value {
							font-size: 42rpx;
							font-family: DIN;
							font-weight: 500;
							color: #000000;
						}
					}
				}
				.b-l {
					.title {
						font-size: 32rpx;
						line-height: 32rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
						margin-bottom: 22rpx;
					}
					.value {
						font-family: DIN;
						font-weight: 500;
						color: #F9B511;
						.value-num {
							font-size: 36rpx;
						}
						.value-unit {
							font-size: 24rpx;
						}
					}
				}
			}
		}
		.block-box2 {
			padding-top: 34rpx;
			.top .icon-box .title {
				margin-left: 0;
			}
			.tips {
				font-size: 24rpx;
				line-height: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				padding-top: 46rpx;
			}
		}
		.notice-box {
			margin: 40rpx 0;
			.name {
				width: 71rpx;
				height: 36rpx;
				border: 1px solid #44D288;
				border-radius: 5rpx;
				text-align: center;
				line-height: 32rpx;
				font-size: 26rpx;
				font-family: Benmo Qianghei;
				font-weight: 400;
				color: #44D288;
			}
			image {
				width: 28rpx;
				height: 28rpx;
				margin-left: 7rpx;
				margin-right: 18rpx;
			}
			.value {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}
		.card {
			width: 326rpx;
			height: 158rpx;
			color: #fff;
			.name {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				font-size: 32rpx;
				z-index: 1;
			}
			.count {
				font-size: 22rpx;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				opacity: 0.5;
				z-index: 1;
			}
			position: relative;
			image {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 0;
			}
		}
	}
</style>
